<template>
  <div>
    <Title title="疫苗接种新增"></Title>
    <el-row>
      <el-col :span="8">
        <el-form
          ref="formRef"
          :model="form"
          status-icon
          :rules="rules"
          label-width="120px"
          label-position="top"
          class="myform"
        >
          <el-form-item label="疫苗品牌" prop="brand">
            <el-select
              v-model="form.brand"
              class="m-2"
              style="width: 100%"
              placeholder="请选择你接种疫苗的品牌"
              size="default"
            >
              <el-option
                v-for="item in VacTypes"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="接种医院" prop="hospital">
            <el-input
              clearable
              v-model="form.hospital"
              placeholder="请填写你接种疫苗的医院"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="接种日期" prop="date">
            <div class="block">
              <el-date-picker
                v-model="form.date"
                type="date"
                placeholder="请选择你接种疫苗的日期"
                :disabled-date="disabledDate"
                :shortcuts="shortcuts"
              />
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btnblock" @click="submitForm()"
              >提交表单</el-button
            >
            <el-button type="danger" class="btnblock" @click="resetForm(formRef)"
              >重置数据</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { VacTypes,ShowErrorMsg } from "@/utils";
import type { FormInstance } from 'element-plus'
import {useRouter} from "vue-router";
import {Ajax} from "@/api"
const router = useRouter();
const formRef = ref<FormInstance>()
const form = reactive({
  brand: "",
  hospital: "",
  date: "",
});
const rules = reactive({
  brand: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  hospital: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  date: [
    {
      required: true,
      message: "请选择",
      trigger: ["change", "blur"],
    },
  ],
});

const shortcuts = [
  //快捷选择
  {
    text: "今天",
    value: new Date(),
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    },
  },
];
const disabledDate = (time: Date) => {
  //无法选中的日期，在今天之后
  return time.getTime() > Date.now();
};
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
const submitForm = () => {
    formRef.value.validate(async (valid: any) => {
    //整个表单校验
    if (valid) {
      let res: any = await Ajax.vacadd(form);
      if (res.code == 200) {
        router.push({ name: "health-vac" });
      } else {
        ShowErrorMsg("校验失败");
      }
    }
  });
};
</script>
